<template>
	<view>
		<view class="head" @click="shower=true">
			<view class="zi">
				头像
			</view>
			<image class="image1" src="../../static/users/head.png" mode=""></image>
			<image class="image2" src="../../static/users/right.png" mode=""></image>
		</view>
		<u-action-sheet @click="click" :list="lists" v-model="shower"></u-action-sheet>
		<!-- <u-upload :source-type="arr" ref="uUpload" :action="action" :auto-upload="false" ></u-upload> -->
		<view class="msg">
			<view class="msg_hang" @click="show=true">
				<text class="text1">昵称</text>
				<view class="name">
					风继续吹
				</view>
				<image class="image2" src="../../static/users/right.png" mode=""></image>
			</view>

			<u-popup v-model="show" mode="center" border-radius="30">
				<view class="center">
					<text>修改昵称</text>
					<view class="ipt">
						<input maxlength="8" @input="change" type="text" v-model="value" value="" />
						<view class="num">
							{{num}}/8
						</view>
					</view>
					<view class="have">
						昵称已被占用
					</view>
					<view class="true">
						确定
					</view>
					<view class="quxiao" @click="show=false">
						取消
					</view>
				</view>
			</u-popup>

			<view class="msg_hang">
				<text class="text1">ID</text>
				<view class="name">
					21545781
				</view>
				<image class="image2" src="../../static/users/right.png" mode=""></image>
			</view>

			<view class="msg_hang" @click="showsex=true">
				<text class="text1">性别</text>
				<view class="name">
					{{sex}}
				</view>
				<image class="image2" src="../../static/users/right.png" mode=""></image>
			</view>
			
			<u-popup v-model="showsex" mode="center" border-radius="30">
				<view class="center">
					<text>修改性别</text>
					<view class="man" :class="{bianman:id==1}" @click="sexid(1)">
						<image src="../../static/users/man.png" mode=""></image>
						男
					</view>
					
					<view class="woman" :class="{bianwoman:id==2}" @click="sexid(2)">
						<image src="../../static/users/woman.png" mode=""></image>
						女
					</view>
				    
					<view class="true" @click="trueer">
						确定
					</view>
					<view class="quxiao" @click="showsex=false">
						取消
					</view>
				</view>
			</u-popup>
			<view class="msg_hang" @click="jump">
				<text class="text1">收货信息</text>
				<image class="image2" src="../../static/users/right.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				num: 0,
				value: "",
				shower: false,
				showsex:false,
				lists: [{
					text: '查看图片',
				}, {
					text: '从手机相册选取',
				}, {
					text: '照相',
				}],
				action: 'http://www.example.com/upload',
				arr: ['album'],
				id:"",
				sex:"请选择性别"
			}
		},
		methods: {
			change() {
				this.num = this.value.length
			},
			jump() {
				uni.navigateTo({
					url: "../showaddress/showaddress"
				})
			},
			trueer(){
				this.showsex=false
				if(this.id==1){
					this.sex="男"
				}else if(this.id==2){
					this.sex="女"
				}
			},
			sexid(id){
				this.id=id

			},
			click(index) {
				console.log(index);
				if (index == 0) {
					uni.previewImage({
						urls: ["../../static/users/head.png"]
					})
				} else if (index == 1) {
					uni.chooseImage({
						count: 1,
						sourceType: ['album'],
						success: function(res) {
							console.log(res.tempFilePaths[0]);
							const tempFilePaths = res.tempFilePaths;
							uni.uploadFile({
								url: 'https://www.example.com/upload', //仅为示例，非真实的接口地址
								filePath: tempFilePaths[0],
								name: 'file',
								formData: {
									'user': 'test'
								},
								success: (uploadFileRes) => {
									console.log(uploadFileRes.data);
								}
							})
						}
					});
				}else if(index==2){
					uni.chooseImage({
						count: 1,
						sourceType: ['camera'],
						success: function(res) {
							console.log(res.tempFilePaths[0]);
							const tempFilePaths = res.tempFilePaths;
							uni.uploadFile({
								url: 'https://www.example.com/upload', //仅为示例，非真实的接口地址
								filePath: tempFilePaths[0],
								name: 'file',
								formData: {
									'user': 'test'
								},
								success: (uploadFileRes) => {
									console.log(uploadFileRes.data);
								}
							})
						}
					});
				}
			}
		}
	}
</script>

<style lang="scss">
	.bianman{
		border: 1rpx solid blue;
		width: 98rpx;
		height: 44rpx;
	}
	.bianwoman{
		border: 1rpx solid red;
		width: 98rpx;
		height: 44rpx;
	}
	.center {
		padding: 40rpx 32rpx 0 28rpx;
		width: 600rpx;
		height: 420rpx;
		background: #FFFFFF;
		text-align: center;
		position: relative;

		text {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #181818;
		}
		.man{
			position: absolute;
			top: 140rpx;
			left: 160rpx;
			width: 100rpx;
			// border: 1px solid #fff;
			height: 46rpx;
			text-align: right;
			padding:4rpx 14rpx 0 0;
			border-radius: 23rpx;
			image{
				position: absolute;
				left: 10rpx;
				width: 40rpx;
				height: 40rpx;
			}
		}
		.woman{
			position: absolute;
			top: 140rpx;
			right: 160rpx;
			width: 100rpx;
			height: 46rpx;
			text-align: right;
			padding:4rpx 14rpx 0 0;
			border-radius: 23rpx;
			image{
				position: absolute;
				left: 10rpx;
				width: 40rpx;
				height: 40rpx;
			}
		}
		.ipt {
			margin-top: 40rpx;
			width: 540rpx;
			height: 80rpx;
			background: #F4F8FB;
			border-radius: 40rpx;
			position: relative;

			input {
				margin-left: 30rpx;
				text-align: left;
				width: 400rpx;
				height: 80rpx;
			}

			.num {
				position: absolute;
				right: 30rpx;
				top: 25rpx;
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 300;
				color: #999999;
			}
		}

		.have {
			position: absolute;
			left: 57rpx;
			top: 200rpx;
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 300;
			color: red;
		}

		.true {
			position: absolute;
			left: 185rpx;
			bottom: 96rpx;
			text-align: center;
			line-height: 68rpx;
			width: 230rpx;
			height: 68rpx;
			background: #181818;
			border-radius: 34rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
		}

		.quxiao {
			position: absolute;
			left: 185rpx;
			bottom: 23rpx;
			text-align: center;
			line-height: 68rpx;
			width: 230rpx;
			height: 68rpx;
			border-radius: 34rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #999999;
		}
	}

	page {
		background-color: #F2F4FA;
	}

	.head {
		margin: 30rpx;
		width: 690rpx;
		height: 210rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		position: relative;

		.zi {
			position: absolute;
			top: 92rpx;
			left: 42rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #181818;
		}

		.image1 {
			position: absolute;
			right: 60rpx;
			top: 40rpx;
			width: 130rpx;
			height: 130rpx;
		}

		.image2 {
			position: absolute;
			right: 30rpx;
			top: 96rpx;
			width: 10rpx;
			height: 18rpx;
		}
	}

	.msg {
		margin-left: 30rpx;
		padding: 20rpx 30rpx 0 40rpx;
		width: 690rpx;
		height: 382rpx;
		background: #FFFFFF;
		border-radius: 40rpx;

		.msg_hang {
			margin: 20rpx 0 62rpx 0;
			width: 620rpx;
			height: 30rpx;
			position: relative;

			.text1 {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #181818;
			}

			.name {
				position: absolute;
				right: 30rpx;
				top: 0rpx;
			}

			.image2 {
				position: absolute;
				right: 0rpx;
				top: 12rpx;
				width: 10rpx;
				height: 18rpx;
			}
		}
	}
</style>
